<template>
  <transition>
    <div class="push-order-details2">

      <section class="app-main">
        <template v-if="selectProduct==false">
        <ul class="details-tab-button">
          <li v-for="(item,index) in customerType" class="item" :class="{active:currentType==index}" @click="handleChange(item,index)">{{item.name}}</li>
        </ul>
        <div class="tab-body">
          <div class="tab-content" v-if="currentType=='0'">
            <dl class="module-block">
              <dt class="block-header">车辆信息<mt-button class="button-select" type="primary" @click="handleSelectCar">重新选择</mt-button></dt>
              <dd class="word-content word-info">
                <mt-field label="联系人" placeholder="" v-model="carInfo.carOwner" readonly="readonly"></mt-field>
                <mt-field label="车牌号" placeholder="" v-model="carInfo.carNo" readonly="readonly"></mt-field>
                <mt-field label="联系电话" placeholder="" v-model="carInfo.phone" readonly="readonly"></mt-field>
                <mt-field label="车型" placeholder="" v-model="carInfo.carNo" readonly="readonly"></mt-field>
                <mt-field label="车架号" placeholder="" v-model="carInfo.vin" readonly="readonly"></mt-field>
              </dd>
            </dl>
            <dl class="module-block">
              <dt class="block-header">接车事项</dt>
              <dd class="word-content word-info">
                <mt-cell
                  title="服务类别" class="mint-field">
                  <select v-model="post.repairType" class="select-operator">
                    <option value="3501">洗车美容</option>
                    <option value="3505">汽车修理厂</option>
                  </select>
                </mt-cell>
                <mt-field label="维修内容" placeholder="必填" v-model="carQuestion.content"></mt-field>
                <mt-cell class="wrod-info-check" title="预检" is-link @click.native="popupCheckCar=true">
                  请检查预检项目
                  <!--正常<span class="ic-circel ic-true">50</span>-->
                  <!--异常<span class="ic-circel ic-wrong">0</span>-->
                  <!--未查<span class="ic-circel ic-none">0</span>-->
                </mt-cell>

                <mt-popup
                  v-model="popupCheckCar"
                  position="right" class="popup-add-product popup-check-car">
                  <!--<mt-field label="入店时间" placeholder="请选择入店时间" type="text" v-model="post.comeDate" readonly="readonly" @click.native="openPicker('start')"></mt-field>-->
                  <mt-field label="公里数" placeholder="请填写公里数" type="number" v-model="checkCar.licheng">
                    <span class="iconfont icon-xiangjizhuanhuan"></span>
                  </mt-field>
                  <mt-field label="入店油量" placeholder="请填写入店油量" type="number" v-model="checkCar.youliang">

                    <span class="iconfont icon-xiangjizhuanhuan"></span>
                  </mt-field>
                  <mt-field label="外观" placeholder="不填默认无异常" v-model="checkCar.waiguan">

                    <span class="iconfont icon-xiangjizhuanhuan"></span>
                  </mt-field>
                  <mt-field label="故障灯" placeholder="不填默认无异常" v-model="checkCar.guzhangdeng">
                    <span class="iconfont icon-xiangjizhuanhuan"></span>
                  </mt-field>
                  <mt-field label="内饰" placeholder="不填默认无异常" v-model="checkCar.neishi">

                    <span class="iconfont icon-xiangjizhuanhuan"></span>
                  </mt-field>
                  <mt-field label="其他" placeholder="不填默认无异常" v-model="checkCar.qita"></mt-field>
                  <mt-field label="车内物品" placeholder="请填写车内物品" v-model="checkCar.goods"></mt-field>
                  <mt-field label="客户描述" placeholder="请填写客户描述" v-model="checkCar.note"></mt-field>

                  <mt-cell
                    title="预检照片" class="mint-field mint-field-img">
                    <dl class="img-upload-content me-row">
                      <dd class="item" v-for="(item,index) in files">
                        <span class="iconfont icon-shanchu" @click="handleDelImg(index,item)"></span>
                        <img class="img" :src="item.src" @click="handleCheckPic(index)"/>
                        <mt-field label="" placeholder="照片备注" v-model="post.youliang"></mt-field>
                      </dd>
                      <dd class="item item-add" @click="handleSelectImg()">
                        <span class="iconfont add-img icon-jiahao"></span>
                      </dd>
                    </dl>
                  </mt-cell>
                  <div class="button-content" style="padding:16px;">
                    <mt-button type="default" @click="popupCheckCar=false">暂不确认</mt-button>
                    <mt-button type="primary" @click="handleSureCheckCar">客户确认</mt-button>
                  </div>
                </mt-popup>
              </dd>
            </dl>
          </div>
          <mt-datetime-picker
            class="select-datetime"
            ref="picker"
            v-model="pickerValue"
            type="datetime"
            year-format="{value} 年"
            month-format="{value} 月"
            date-format="{value} 日"
            :startDate="startDate"
            :endDate="endDate"
            @confirm="handleDateChange">
          </mt-datetime-picker>

          <div class="tab-content tab-content-price" v-if="currentType=='1'">
            <template>
              <div class="add-button">
                <mt-button type="primary" @click="handleAddPrice('0')"><span class="iconfont icon-zengjia"></span>添加配件</mt-button>
                <mt-button type="danger" @click="handleAddPrice('1')"><span class="iconfont icon-zengjia"></span>添加服务</mt-button>
              </div>
              <dl class="media-list media-show-product" v-if="productHasSelect.length>0">
                <dt class="media-header">配件项目</dt>
                <dd class="media-item" v-for="(item,index) in productHasSelect">
                    <div class="media-title">{{item.commAttribName}}<span class="iconfont icon-close2" @click="handleDeleteProduct(index,'0',item)"></span></div>
                    <dl class="media-price">
                      <dd class="price">￥{{item.retailPrice}}</dd>
                      <dd class="count">x{{item.myCount}}</dd>
                      <dd class="num">￥{{(item.retailPrice)*(item.myCount)}}</dd>
                    </dl>
                </dd>
              </dl>
              <dl class="media-list media-show-product" v-if="serviceHasSelect.length>0">
                <dt class="media-header">服务项目</dt>
                <dd class="media-item" v-for="(item,index) in serviceHasSelect">
                  <div class="media-title">{{item.seName}}<span class="iconfont icon-close2" @click="handleDeleteProduct(index,'1',item)"></span></div>
                  <dl class="media-price">
                    <dd v-if="item.seTypeName=='金额型'" class="price">￥{{item.seAmount}}</dd>
                    <dd v-else class="price">￥{{item.sePrice}}</dd>
                    <dd class="count">x{{item.myCount}}</dd>
                    <dd v-if="item.seTypeName=='金额型'" class="num">￥{{item.seAmount}}</dd>
                    <dd v-else class="num">￥{{(item.sePrice)*(item.myCount)}}</dd>
                  </dl>
                </dd>
              </dl>
            </template>
          </div>
        </div>
        <div class="button-content-bottom">
            <!--<mt-button type="danger">提交结账</mt-button>-->
            <mt-button type="primary">保存工单</mt-button>
        </div>
        </template>
        <!--选择配件或服务弹窗-->
        <div
          v-show="selectProduct==true"
          class="popup-select-product">
          <template v-if="selectType=='0'">
          <div class="search-content">
            <mt-field label="" placeholder="可输入商品编码、商品名称查询" v-model="searchValue" @keyup.enter.native="handleSelectCode">
              <span class="iconfont icon-search" @click="handleSelectCode"></span></mt-field>

            <mt-button class="action-ruku" type="primary" @click.native="handleAddProduct">新增</mt-button>
          </div>
          <ul class="media-list"
              v-infinite-scroll="loadMore"
              infinite-scroll-disabled="loading"
              infinite-scroll-distance="10">
            <li class="media-item" v-for="(item,index) in productList">
              <!--<span class="media-img"><img :src="item.src"></span>-->
              <span class="media-img" @click="handleEditProduct(item)"><img :src="noneImg"/></span>
              <dl class="media-content">
                <dd class="media-title" @click="handleEditProduct(item)">{{item.commAttribName}}</dd>
                <dd class="media-number" @click="handleEditProduct(item)">{{item.commAttribCode}}
                  <span class="count" v-if="typeof(item.onHandQty)==undefined">库存：{{item.onHandQty}}</span>
                  <span class="count" v-else>库存：0</span>
                </dd>
                <dd class="media-price">￥<span class="price">
                    <input class="price-input" type="number" v-model="item.retailPrice"/>
                </span>
                  <div class="select-count">
                    <span class="item item-reduce js-item-reduce" @click="handleModify(item,'reduce')">-</span>
                    <input class="item item-input js-item-input" type="number" v-model="item.myCount"/>
                    <span class="item item-add js-item-add" @click="handleModify(item,'add')">+</span>
                  </div>
                </dd>
              </dl>
            </li>
          </ul>
          <div class="button-content-bottom">
            <mt-button type="default" @click.native="selectProduct=false">返回</mt-button>
            <mt-button type="primary" @click.native="handleSureProduct">确认</mt-button>
          </div>
          <div class="line-scale-pulse-out" v-show="loading">
            <div class="loader-item"></div>
            <div class="loader-item"></div>
            <div class="loader-item"></div>
            <div class="loader-item"></div>
            <div class="loader-item"></div>
          </div>
          </template>
          <template v-else>

            <div class="search-content" style="padding-left: 0;">
              <mt-field label="全部服务方式" placeholder="" v-model="searchValue" style="border: none;"></mt-field>

              <mt-button class="action-ruku" type="primary" @click.native="handleAddService">新增</mt-button>
            </div>
            <ul class="media-list media-list-service">
              <li class="media-item" v-for="(item,index) in serviceList">
                <dl class="media-content">
                  <dd class="media-title">{{item.seName}}<span class="media-type">{{item.seTypeName}}</span></dd>
                  <dd class="media-price">￥<span class="price">
                    <input v-if="item.seTypeName=='金额型'" class="price-input" type="number" v-model="item.seAmount"/>
                    <input v-else class="price-input" type="number" v-model="item.sePrice"/>
                </span>
                    <div class="select-count">
                      <span class="item item-reduce js-item-reduce" @click="handleModifyService(item,'reduce')">-</span>
                      <input class="item item-input js-item-input" type="number" v-model="item.myCount"/>
                      <span class="item item-add js-item-add" @click="handleModifyService(item,'add')">+</span>
                    </div>
                  </dd>
                  <dd class="media-action">
                    <span class="iconfont icon-bianji" @click="handleEditService(item)"></span>
                    <span class="iconfont icon-shanchu" @click="handleDeleteService(item)"></span>
                  </dd>
                </dl>
              </li>
            </ul>
            <div class="button-content-bottom">
              <mt-button type="default" @click.native="selectProduct=false">返回</mt-button>
              <mt-button type="primary" @click.native="handleSureService">确认</mt-button>
            </div>
          </template>
        </div>

        <mt-popup
          v-model="popupAddProduct"
          position="right" class="popup-add-product">
          <mt-field label="商品编码" placeholder="请输入商品编码" v-model="product.commAttribCode"></mt-field>
          <mt-field label="商品名称" placeholder="请输入商品名称" v-model="product.commAttribName"></mt-field>
          <mt-field label="商品分类" placeholder="请选择商品分类" v-model="product.classify" readonly="readonly" @click.native="popupShow=true"></mt-field>
          <mt-field label="采购价" placeholder="请输入采购价" type="number" v-model="product.purchasePrice"></mt-field>
          <mt-field label="批发价" placeholder="请输入批发价" type="number" v-model="product.wholesalePrice"></mt-field>
          <mt-field label="销售价" placeholder="请输入销售价" type="number" v-model="product.retailPrice"></mt-field>

          <div class="button-content">
            <mt-button type="primary" @click="handleSurePost">确定</mt-button>
          </div>

        </mt-popup>

        <mt-popup
          v-model="popupShow"
          position="bottom" class="me-popup-classify">
          <div class="top-department" v-if="popupAddClassify" @click="handleSelectTopClassify">
            <span class="node-expand iconfont icon-wenjian1" type="text"></span><span class="node-text">顶级分类</span></div>
            <Tree @selectPart="selectPart"
                  @deletePart="deletePart"
                  @editPart="editPart"
                  :treeData="partList">
            </Tree>
          <div class="button-content button-content-add-part">
            <mt-button type="primary" @click="handleAddPart">添加分类</mt-button>
          </div>
        </mt-popup>

        <!--新增分类-->
        <mt-popup
          v-model="popupAddClassify"
          position="bottom"
          class="me-popup-classify popup-classify-add">
          <template>
            <mt-field label="商品分类" placeholder="请输入商品分类" v-model="classify.name"></mt-field>
            <mt-field class="field-part" label="上级分类" placeholder="请选择上级分类" readonly="readonly" v-model="classify.parentName"  @click.native="popupShow=true"></mt-field>
          </template>
          <div class="button-content">
            <div class="button-block-6">
              <mt-button type="default" @click="popupAddClassify = false">取消</mt-button>
            </div>
            <div class="button-block-6">
              <mt-button type="primary" @click="handleConfirmPart">确定</mt-button>
            </div>
          </div>
        </mt-popup>
        <mt-popup
          v-model="popupAddService"
          position="right" class="popup-add-product">

          <mt-field label="项目代码" placeholder="请输入项目代码" v-model="service.seCode"></mt-field>
          <mt-field label="项目名称" placeholder="请输入项目名称" v-model="service.seName"></mt-field>
          <mt-cell
            title="计价方式" class="mint-field mint-field-select">
            <select v-model="service.seType" class="select-operator">
              <option value="3301">金额型</option>
              <option value="3302">单价型</option>
            </select>
          </mt-cell>
          <mt-field label="金额" v-if="service.seType=='3301'" placeholder="请输入金额" v-model="service.seAmount"></mt-field>
          <mt-field label="单价" v-if="service.seType=='3302'" placeholder="请输入单价" v-model="service.sePrice"></mt-field>
          <mt-field label="成本" placeholder="请输入成本" v-model="service.cost"></mt-field>
          <mt-field label="备注" placeholder="请输入备注" v-model="service.remarks"></mt-field>

          <div class="button-content">
            <mt-button type="primary" @click="handleSurePostService">确定</mt-button>
          </div>
        </mt-popup>

        <mt-popup
          v-model="popupAutograph"
          position="right" class="popup-add-product popup-autograph" style="width: 100%;">
          <Autograph @autographSure="autographSure" @popupAutographClose="popupAutograph=false"></Autograph>
        </mt-popup>
    </section>
  </div>
    </transition>
</template>

<script>
  import { Navbar,Button,MessageBox,Toast ,Checklist,Indicator,DatetimePicker } from 'mint-ui';
  import Tree from '../common/tree.vue';
  import Autograph from '../common/autograph.vue';
  export default {
    components:{
      Tree,
      Autograph
    },
  data () {
    return {
      selectType:'',
      searchValue:'',
      noneImg:'./static/img/img-none.jpg',
      selectProduct:false,
      productList:[],
      serviceList:[],
      productHasSelect:[],
      serviceHasSelect:[],
      carQuestion:{
        content:'',
        note:'',
      },

      carInfo:{},
      customerType:[{
        name:'车辆详情'
      },{
        name:'收费项目'
      }],
      currentType:'0',
      post:{
        repairType:'',
        comeDate:'',
        leaveDate:'',
      },
      servicePriceAttr:[],
      page:1,
      total:'',
      loading:false,
      pickerValue:new Date(),
      startDate:new Date(),
      endDate:new Date(new Date().getTime()+30 * 24 * 3600 * 1000),
      isSelectStart:true,
      files:[
        {
          src:'https://linpu.oss-cn-beijing.aliyuncs.com/pu/%E9%97%A8%E5%A4%B4%E7%85%A7/IMG_20190912_144415.jpg?x-oss-process=image/resize,w_450',
        }
      ],
      popupAddProduct:false,
      popupAddService:false,
      partList:[],
      popupShow:false,
      popupAddClassify:false,
      product:{
        id:'',
        classifyId:'',
        classify:'',
        commAttribCode:'',
        commAttribName:'',
        originalCode:'',
        purchasePrice:'',
        wholesalePrice:'',
        retailPrice:'',
        isActive:'',
      },

      classify:{
        id:'',
        name:'',
        parentId:'',
        parentName:'',
      },
      service:{
        serviceId:'',
        seCode:'',
        seName:'',
        seType:'3301',
        seAmount:'',
        sePrice:'',
        cost:'',
        remarks:'',
      },
      checkCar:{},
      popupCheckCar:false,
      popupAutograph:false,
    }
  },
  beforeRouteEnter (to, from, next) {
    var u = navigator.userAgent;
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    // XXX: 修复iOS版微信HTML5 History兼容性问题
    if (isiOS && to.path !== location.pathname) {
      // 此处不可使用location.replace
      location.assign(to.fullPath)
    } else {
      next()
    }
  },
  mounted(){
    this.carInfo={
      carOwner:this.$route.query.carOwner,
      carNo:this.$route.query.carNo,
      vin:this.$route.query.vin,
      phone:this.$route.query.phone,
      vehicleId:this.$route.query.vehicleId,
      isAtStore:false,
    }


//    Indicator.open({
//      text: '加载中...',
//      spinnerType: 'snake'
//    });
    this.getData();
    this.getServiceData();
  },
  methods: {
    getData(){
      this.$axios({
        method: 'post',
        url:'gp/util/ajax!getBdTree.do?bdType=bu_classify.classify_id.classify',
      }).then((res)=>{
        this.partList=res.data;
      console.log(this.partList,12313)
    });
      this.page=1
      this.productList=[];
      var params = new URLSearchParams();
      params.append('page', this.page);
      params.append('commAttribCode', this.searchValue);
      this.$axios({
        method: 'post',
        url:'gp/bu/commattrib!getCommattribList.do',
        data:params,
      }).then((res)=>{
        for(var i=0;i<res.data.rows.length;i++){
        res.data.rows[i].myCount=0;
        this.productList.push(res.data.rows[i])
      }
      this.total=res.data.total
      Indicator.close();
    });
    },
    getServiceData(){
      this.serviceList=[];
      var params = new URLSearchParams();
      params.append('page', 1);
      params.append('pageSize', 50);
      this.$axios({
        method: 'post',
        url:'gp/bu/serviceExpenses!getServiceExpensesList.do',
        data:params,
      }).then((res)=>{

        Indicator.close();

      for(var i=0;i<res.data.rows.length;i++){
        res.data.rows[i].myCount=0;
        this.serviceList.push(res.data.rows[i])
      }

    });

    },
    handleModify(item,type){

      if(type=='reduce'){
        if(item.myCount<=0){
          Toast({
            message: '不能小于0',
            position: 'middle',
            duration:1200
          });
          return false;
        }else{
          item.myCount--;
        }

      }else{

        console.log(item.onHandQty)

        item.myCount++;
      }

    },
    handleModifyService(item,type){

      if(type=='reduce'){
        if(item.myCount<=0){
          Toast({
            message: '不能小于0',
            position: 'middle',
            duration:1200
          });
          return false;
        }else{
          item.myCount--;
        }

      }else{

        if(item.seTypeName=='金额型'){

          if(item.myCount==1){

            Toast({
              message: '金额型的服务次数最多为一次',
              position: 'middle',
              duration:1200
            });
            return false;
          }

          item.myCount++;
        }else{
          item.myCount++;
        }
      }

    },
    handleSureProduct(){
      this.productHasSelect=[];
      for(var i=0;i<this.productList.length;i++){
        if(this.productList[i].myCount!=0){
          if(this.productList[i].retailPrice==undefined || this.productList[i].retailPrice==''){

            Toast({
              message: '请输入商品价格',
              position: 'middle',
              duration: 1000
            });
            return false;
          }
          this.productHasSelect.push(this.productList[i])
        }
      }
      this.selectProduct=false
    },
    handleSureService(){
      this.serviceHasSelect=[];
      for(var i=0;i<this.serviceList.length;i++){
        if(this.serviceList[i].myCount!=0){


          if((this.serviceList[i].seTypeName=='单价型') && (this.serviceList[i].sePrice==undefined || this.serviceList[i].sePrice=='')){

            Toast({
              message: '请输入服务价格',
              position: 'middle',
              duration: 1000
            });
            return false;
          }else if((this.serviceList[i].seTypeName=='金额型') && (this.serviceList[i].seAmount==undefined || this.serviceList[i].seAmount=='')){
            Toast({
              message: '请输入服务价格',
              position: 'middle',
              duration: 1000
            });
            return false;
          }
          this.serviceHasSelect.push(this.serviceList[i])
        }
      }
      this.selectProduct=false;

    },
    handleDeleteProduct(index,type,item){
      if(type=='0'){
        MessageBox({
          title: '',
          message: '确认是否去掉该配件?',
          showCancelButton: true
        }).then(action => {
          if(action=='confirm'){
          this.productHasSelect.splice(index,1)
          for(var i=0;i<this.productList.length;i++){
            if(item.commAttribId==this.productList[i].commAttribId){
              this.productList[i].myCount=0;
            }
          }

        };
      })
      }else{
        MessageBox({
          title: '',
          message: '确认是否去掉该服务?',
          showCancelButton: true
        }).then(action => {
          if(action=='confirm'){
          this.serviceHasSelect.splice(index,1)
          for(var i=0;i<this.serviceList.length;i++){
            if(item.serviceId==this.serviceList[i].serviceId){
              this.serviceList[i].myCount=0;
            }
          }
        };
      })
      }

    },
    handleSelectCode(){
      this.productList=[];
      this.getData();
    },
    handleSelectCar(){

      sessionStorage.setItem('isAddOrder','true');
      this.$router.push({path:'/customer-management'})
    },
    handleChange(item, index){
      this.currentType = index;
    },
    loadMore(){
      console.log(this.productList.length,this.total,2352424)
      if(this.total==0){
        return false;
      }
      if(this.productList.length<this.total){
        this.loading = true;
        this.page++;
        var params = new URLSearchParams();
        params.append('page', this.page);
        params.append('commAttribCode', this.searchValue);
        this.$axios({
          method: 'post',
          url:'gp/bu/commattrib!getCommattribList.do',
          data:params,
        }).then((res)=> {

          for(var i=0;i<res.data.rows.length;i++){
          res.data.rows[i].myCount=0;
          this.productList.push(res.data.rows[i])
        }
      });
        setTimeout(() => {
          this.loading = false;
      },1500);
      }else{
        this.loading = false;
        this.loadTips=true;
      }
    },
    handleAddPrice(type){
      /**生成列表**/
//      this.total='';
//      if(type=='0'){
//        this.productList=[];
//        this.getData();
//      }
      this.selectType=type;
      this.selectProduct=true
    },
    handleDelPrice(item,index){
      this.form.parts.splice(index, 1);
      if(item.partType=='3'){
        this.servicePriceAttr.splice(0, 1);
      }
    },
    handleAddProduct(){
      this.popupAddProduct=true;
      this.product.product={
          id:'',
          classifyId:'',
          classify:'',
          commAttribCode:'',
          commAttribName:'',
          originalCode:'',
          purchasePrice:'',
          wholesalePrice:'',
          retailPrice:'',
          isActive:'',
      };
    },
    handleAddService(){
      this.popupAddService=true;
      this.service={
        serviceId:'',
          seCode:'',
          seName:'',
          seType:'3301',
          sePrice:'',
          seAmount:'',
          cost:'',
          remarks:'',
      };
    },
    handleSurePostService(){


      if(this.service.seCode==''){
        Toast({
          message: '请输入项目代码',
          position: 'middle',
          duration: 1000
        });
        return false;
      }
      if(this.service.seName==''){
        Toast({
          message: '请输入项目名称',
          position: 'middle',
          duration: 1000
        });
        return false;
      }

      var params = new URLSearchParams();
      params.append('form.seCode',this.service.seCode);
      params.append('form.seName',this.service.seName);
      params.append('form.seType',this.service.seType);
      params.append('form.sePrice',this.service.sePrice);
      params.append('form.seAmount',this.service.seAmount);
      params.append('form.cost',this.service.cost);
      params.append('form.remarks',this.service.remarks);
      params.append('form.deleteMark',0);

      if(this.service.serviceId!=''){
        params.append('form.serviceId', this.service.serviceId);
      }
      this.$axios({
        method: 'post',
        url:'gp/bu/serviceExpenses!saveServiceExpenses.do',
        data:params
      }).then((res)=>{
        if(res.data.result==true){
        Toast({
          message: res.data.message,
          position: 'middle',
          duration: 1200
        });

        this.popupAddService=false;
        this.getServiceData();
      }else{
        Toast({
          message: res.data.message,
          position: 'middle',
          duration: 1500
        });
      }

    })

    },
    handleEditProduct(item){

      /**获取商品详情**/
      var params = new URLSearchParams();
      params.append('form.commAttribId', item.commAttribId);
      params.append('plateFormFlag','0101');
      this.$axios({
        method: 'post',
        url:'gp/app/commattribApp!getDetail.do?',
        data:params,
      }).then((res)=>{
        this.popupAddProduct=true;
        this.resData=res.data.object;
        this.product.id=item.commAttribId
        this.product.commAttribCode=this.resData.commAttribCode
        this.product.commAttribName=this.resData.commAttribName
        this.product.originalCode=this.resData.originalCode
        this.product.purchasePrice=this.resData.purchasePrice
        this.product.wholesalePrice=this.resData.wholesalePrice
        this.product.retailPrice=this.resData.retailPrice
        this.product.classify=this.resData.classify
        this.product.classifyId=this.resData.classifyId
        this.product.isActive=this.resData.isActive

    });
    },
    handleEditService(item){
      console.log(item,1111)
      this.service={
        serviceId:item.serviceId,
        seCode:item.seCode,
        seName:item.seName,
        seType:item.seType,
        sePrice:item.sePrice,
        seAmount:item.seAmount,
        cost:item.cost,
        remarks:item.remarks,
      };
      if(item.seType=='单价型'){
        this.service.seType='3302'
      }else{
        this.service.seType='3301'
      }
      this.popupAddService=true;
    },
    handleDeleteService(item){
      MessageBox({
        title: '',
        message: '确认是否删除该服务方式?',
        showCancelButton: true
      }).then(action => {
        if(action=='confirm'){
        var params = new URLSearchParams();
        params.append('form.serviceId',item.serviceId);
        this.$axios({
          method: 'post',
          url:'gp/bu/serviceExpenses!deleteServiceExpenses.do',
          data:params
        }).then((res)=>{
          if(res.data.result==true){
          Toast({
            message: res.data.message,
            position: 'middle',
            duration: 1500
          });
          this.getServiceData()
        }else{
          Toast({
            message: res.data.message,
            position: 'middle',
            duration: 1500
          });
        }
      })

      };
    })
    },
    handleSurePost(){

      if(this.product.commAttribCode==''){
        Toast({
          message: '请输入商品编码',
          position: 'middle',
          duration: 1000
        });
        return false;
      }
      if(this.product.commAttribName==''){
        Toast({
          message: '请输入商品名称',
          position: 'middle',
          duration: 1000
        });
        return false;
      }

      var params = new URLSearchParams();
      params.append('form.commAttribCode',this.product.commAttribCode);
      params.append('form.commAttribName',this.product.commAttribName);
      params.append('form.originalCode',this.product.originalCode);
      params.append('form.purchasePrice',this.product.purchasePrice);
      params.append('form.wholesalePrice',this.product.wholesalePrice);
      params.append('form.retailPrice',this.product.retailPrice);
      params.append('form.classify',this.product.classify);
      params.append('form.classifyId',this.product.classifyId);
      if(this.product.id!=''){
        params.append('form.commAttribId', this.product.id);
        params.append('form.isActive', this.product.isActive);
      }
      this.$axios({
        method: 'post',
        url:'gp/bu/commattrib!saveCommattrib.do',
        data:params
      }).then((res)=>{
        if(res.data.result==true){
        Toast({
          message: res.data.message,
          position: 'middle',
          duration: 1200
        });

        this.popupAddProduct=false;
        this.getData();
      }else{
        Toast({
          message: res.data.message,
          position: 'middle',
          duration: 1500
        });
      }

    })

    },
    openPicker(type) {
      if(type=='start'){
        this.isSelectStart=true
      }else if(type=='end'){
        this.isSelectStart=false;
      }
      this.$refs.picker.open();
    },
    handleDateChange() {
      const d = new Date(this.pickerValue);
      const year=d.getFullYear();
      var month='';
      var date='';
      var hour='';
      var minute='';
      if(d.getMonth()+1<=9){
        month='0'+(d.getMonth()+1)
      }else{
        month=d.getMonth()+1
      };
      if(d.getDate()+1<=9){
        date='0'+d.getDate()
      }else{
        date=d.getDate()
      };
      if(d.getHours()+1<=9){
        hour='0'+d.getHours()
      }else{
        hour=d.getHours()
      };
      if(d.getMinutes()+1<=9){
        minute='0'+d.getMinutes()
      }else{
        minute=d.getMinutes()
      };
      if(this.isSelectStart==true){
        this.post.comeDate=year + '-' + month+ '-' +date+' '+hour+':'+minute
      }else{
        this.post.leaveDate=year + '-' + month+ '-' +date+' '+hour+':'+minute
      }
    },
    handleSelectImg(){},
    /**添加分类**/
    selectPart(data){
      console.log(data)
      this.popupShow=false;
      this.product.classify=data.text;
      this.product.classifyId=data.id;
      this.classify.parentName=data.text;
      this.classify.parentId=data.id;
    },
    deletePart(data){
      MessageBox({
        title: '',
        message: '确认是否删除该分类?',
        showCancelButton: true
      }).then(action => {
        if(action=='confirm'){

          var params = new URLSearchParams();
          params.append('form.classifyId', data.id);
          this.$axios({
            method: 'post',
            url:'gp/bu/classify!deleteClassify.do',
            data:params
          }).then((res)=>{
            if(res.data.result==true){
            this.getData();
          }else{
            Toast({
              message: res.data.message,
              position: 'middle',
              duration:800
            });
          }

        })

      };
    })
    },
    editPart(){},
    handleAddPart(){
      this.classify={
        id:'',
        name:'',
        parentName:'',
        parentId:'',
      };
      this.popupAddClassify=true;
      this.popupShow=false;
    },
    handleConfirmPart(){
      if(this.classify.name==''){
        Toast({
          message: '请输入产品分类',
          position: 'middle',
          duration: 1000
        });
        return false;
      }
      var params = new URLSearchParams();
//      if(this.part.id!=''){
//        params.append('form.departmentId', this.part.id);
//      }
      params.append('form.classify', this.classify.name);
      params.append('form.parentId', this.classify.parentId);
      this.$axios({
        method: 'post',
        url:'gp/bu/classify!saveClassify.do',
        data:params
      }).then((res)=>{
        if(res.data.statusCode==200){
        this.popupAddClassify=false
        Toast({
          message: res.data.message,
          position: 'middle',
          duration: 1500
        });
        this.getData();
      }else{
        this.popupAddClassify=false
        Toast({
          message: res.data.message,
          position: 'middle',
          duration: 2000
        });
      }
    })
    },

    handleSelectTopClassify(){
      this.popupShow=false;
      this.classify.parentName='顶级分类';
      this.classify.parentId='';
    },
    handleSureCheckCar(){
      this.popupAutograph=true;
    },
    autographSure(data){
      this.popupAutograph=false;
      this.popupCheckCar=false;
      console.log(data)
    }
  }
}
</script>

<style>
    .push-order-details2 .app-main{
    padding:58px 0 52px;
  }

    .push-order-details2 .button-select{
      float: right;
      height: 28px;
      font-size: 12px;
    }
    .push-order-details2 .module-block{
      background: #fff;
      margin: 0 0 12px;
    }
    .push-order-details2 .word-content{
      margin: 0;
    }
    .push-order-details2 .block-header{
      position: relative;
      display: block;
      padding:12px 12px 10px;
      font-size:16px;
      color: #000;
    }
    .push-order-details2 .module-block-price .block-header{
      position: relative;
      padding:8px 12px 14px;
    }
    .push-order-details2 .block-header:before{
      background:#007EE5;
      position: relative;
      top:-2px;
      display:inline-block;
      vertical-align: middle;
      width:3px;
      height:16px;
      content: '';
      margin-right:5px;
    }
  .push-order-details2 .details-tab-button{
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    overflow: hidden;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.02);
  }
  .push-order-details2 .details-tab-button .item{
    display: flex;
    width: 50%;
    align-items: center;
    justify-content: center;
    padding:12px 0;
    font-size:15px;
  }
  .push-order-details2 .details-tab-button .item.active{
    border-bottom: 1px solid #007EE5;
    color: #007EE5;
  }
    .push-order-details2 .module-block .mint-cell-title{
      width:102px !important;
      line-height: 22px;
      font-size: 15px;
      color: #333;
    }
    .push-order-details2 .module-block .mint-cell .mint-field-core{
      color: #999;
      font-size: 15px;
    }
    .push-order-details2 .module-block .mint-cell{
      min-height:46px;
    }
  .push-order-details2 .button-content-bottom{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: #fff;
    display: flex;
    box-shadow: 0px -6px 4px 0px rgba(0, 0, 0, 0.03);
  }
    .push-order-details2 .button-content-bottom .mint-button{
      display: flex;
      flex: 1;
      border-radius: 0;
      justify-content: center;
      font-size: 16px;
      box-shadow: none;
      height: 50px;

  }
    .push-order-details2 .price-list .price-header{
      font-size: 14px;
      color: #999;
    }
    .push-order-details2 .price-list .icon-delete{
      background: #c34853;
      position: absolute;
      top:-8px;
      right:8px;
      width: 24px;
      height: 24px;
      border-radius:50%;
      color:#fff;
      text-align: center;
      line-height:30px;
    }
    .push-order-details2 .price-item{
      position: relative;
      padding:0 6px;
    }
    .push-order-details2 .price-item,.push-order-details2 .price-header{
      display: flex;
      margin: 0 0 10px;
    }
    .push-order-details2 .price-header{
      padding:0 6px 4px;
      font-size: 16px;
    }
  .push-order-details2 .tab-content-price{
    background: #fff;
    padding:12px;
  }
    .push-order-details2 .tab-content-price .add-button{
    display: flex;
      margin:0 0 12px;
  }
    .push-order-details2 .tab-content-price .add-button .mint-button{
      display: flex;
      width:36%;
      margin-right: 14px;
      justify-content: center;
      font-size: 15px;
  }
    .push-order-details2 .tab-content-price .add-button .icon-zengjia{
      margin-right:6px;
  }
  .push-order-details2 .popup-select-product{
    background: #fff;
  }

    .push-order-details2 .popup-select-product .select-count {
      position: absolute;
      top:-6px;
      right: 0;
      display: inline-block;
      border: 1px solid #eee;
      border-radius: 5px;
    }
    .push-order-details2 .popup-select-product .select-count .item {
      display: inline-block;
      vertical-align: middle;
      width:30px;
      height:28px;
      font-size:16px;
      text-align: center;
      font-weight: bold;
      line-height: 22px;
    }
    .push-order-details2 .popup-select-product .select-count .item-reduce {
      font-size: 20px;
      color: #0080e5;
      border-right: 1px solid #eee; }
    .push-order-details2 .popup-select-product .select-count .item-add {
      font-size:20px;
      color: #0080e5;
      border-left: 1px solid #eee;
    }
    .push-order-details2 .popup-select-product .select-count .item-input {
      width:40px;
      outline: none;
      border: none;
      font-weight: normal;}

    /*.push-order-details2 .popup-select-product .media-list{*/
      /*padding:0 0 24px;*/
    /*}*/
    .push-order-details2 .popup-select-product .media-item{
      display: flex;
    }
    .push-order-details2 .popup-select-product .media-img{
      width: 32%;
    }
    .push-order-details2 .popup-select-product .media-content{
      position: relative;
      padding:10px 10px 18px 0;
      width: 68%;
      margin: 0;
      border-bottom:1px solid #eee;
    }
    .push-order-details2 .popup-select-product .media-list-service .media-content{
      padding:10px 20px 18px;
      width: 100%;

    }
    .push-order-details2 .popup-select-product .media-content dd{
      margin: 0;
      display: flex;
    }
    .push-order-details2 .popup-select-product .media-content .addon{
      width:72px;
    }
    .push-order-details2 .popup-select-product .media-content .content{
      width:80%;
    }
    .push-order-details2 .popup-select-product .media-content .media-title{
      position: relative;
      font-size: 15px;
      color: #000;
      margin:0 0 8px;
      line-height: 22px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp:2;
      overflow: hidden;

    }

    .push-order-details2 .popup-select-product .media-content .media-type{
      position: absolute;
      top: 0;
      right: 0;
      font-size: 12px;
      color: #999;
    }
    .push-order-details2 .popup-select-product .media-content .media-number{
      display: block;
      padding:0 0 24px;
      font-size: 13px;
      color: #999;
    }
    .push-order-details2 .popup-select-product .media-content .media-number .count{
      display: block;
      float: right;
      padding-right: 10px;

    }
    .push-order-details2 .popup-select-product .media-content .media-price{
      position: relative;
      font-size: 14px;
      color: red;
      line-height: 20px;

    }
    .push-order-details2 .popup-select-product .price-input{
      position: relative;
      top: -4px;
      left: 4px;
      width: 70px;
      padding:6px;
      border: 1px solid #eee;
      border-radius: 5px;
      color: red;
      outline: none;
    }
    .push-order-details2 .search-content{
      background: #fff;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      overflow: auto;
      height: 60px;
      padding:12px 72px 12px 16px;
      text-align: center;
      z-index: 1000;
      box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.02);
    }
    .push-order-details2 .search-content .action-ruku{
      position: absolute;
      top: 13px;
      right: 12px;
      font-size: 13px;
      height: 34px;
    }
    .push-order-details2 .search-content .mint-cell-wrapper{
      padding:2px 10px;
    }
    .push-order-details2 .search-content .mint-cell{
      border: 1px solid #ddd;
      border-radius:20px;
      padding:0 6px;
      min-height: inherit;
    }
    .push-order-details2 .search-content .mint-cell .mint-field-core{
      height: 30px;
      font-size: 14px;
    }
    .push-order-details2 .search-content  .icon-search{
      padding-left: 12px;
      font-size: 20px;

    }
    .push-order-details2 .media-show-product{
      margin: 0;
      padding: 0;
  }
    .push-order-details2 .media-show-product .media-item{
      margin: 0;
      padding:10px 8px 14px;
      border-bottom:1px solid #f5f5f5;

  }
    .push-order-details2 .media-show-product .media-title{
      position: relative;
      font-size: 15px;
      color: #000;
      margin:0 0 10px;
      line-height: 22px;
      display: -webkit-box;
      padding-right: 36px;
      -webkit-box-orient: vertical;
      -webkit-line-clamp:2;
      overflow: hidden;

    }
    .push-order-details2 .media-show-product .media-title .icon-close2{
      background: #eee;

      position: absolute;
      top:2px;
      right:6px;
      width: 22px;
      height: 22px;
      border-radius: 3px;
      font-size: 12px;
      text-align: center;
      line-height: 22px;
      color: #999;
    }
    .push-order-details2 .media-show-product .media-price{
      margin:0;
      display: flex;
    }
    .push-order-details2 .media-show-product .media-header{
      background: #f5f5f5;
      padding:6px 0 6px 8px;
      font-size: 12px;
      color: #888;

    }
    .push-order-details2 .media-show-product .media-price dd{
    margin: 0;
      width: 32.3%;
      font-size: 13px;
      color: #999;
  }
    .push-order-details2 .media-show-product .media-price .count{
      text-align: center;
      color: #333;
      font-size: 16px;
  }
    .push-order-details2 .media-show-product .media-price .num{
      text-align: right;
      font-size: 16px;
      color: red;
    }
    .push-order-details2 .select-operator{
      width:90%;
      min-height:32px;
      border:none;
      outline:none;
      font-size: 16px;
      color: #666;
    }
    .push-order-details2 .select-datetime .picker-item{
      padding: 0;
      font-size: 14px;
    }
    .push-order-details2 .img-upload-content{
      width:99%;
      margin: 0;
      padding:0 0 16px;
    }
    .push-order-details2 .img-upload-content .item{
      position: relative;
      padding:0 0 12px 0;
      margin:6px 0 0;
    }
    .push-order-details2 .mint-field-img{
      padding:10px 0 0;
    }
    .push-order-details2 .mint-field-img .mint-cell-wrapper{
      align-items: flex-start;
    }
    .push-order-details2 .mint-field-img .img-upload-content .mint-cell-wrapper{
      align-items: center;
    }
    .push-order-details2 .img-upload-content .item .mint-cell{
      background: none;
      display: inline-block;
      vertical-align: bottom;
      width: 62%;
      min-height: 28px;
      border: 1px solid #ddd;
      border-radius: 3px;
    }
    .push-order-details2 .img-upload-content .item .mint-cell .mint-field-core{
      font-size: 14px;

    }
    .push-order-details2 .img-upload-content img{
      width:64px;
      height: 60px;
    }
    .push-order-details2 .img-upload-content .icon-shanchu{
      background:rgba(225,225,225,0.5) !important;
      position: absolute;
      top:0;
      left: 0;
      width: 20px;
      height: 20px;
      font-size:15px !important;
      color:#fff;
      text-align: center;
      line-height: 24px;
    }
    .push-order-details2 .add-img{
      display: block;
      width:64px;
      height: 60px;
      padding:0;
      color: #ddd;
      line-height: 60px;
      text-align: center;
      border:1px dashed #ddd;
    }
    .push-order-details2 .add-img:before{
      display: block;
      margin:0 auto 4px;
      font-size: 24px;
    }
    .push-order-details2 .popup-add-product{
      width: 90%;
      height: 100%;
      overflow: auto;
    }

    .popup-add-product .button-content{
      display: flex;
      padding:24px 36px;
    }
    .popup-add-product .button-content .mint-button{
      width: 100%;
    }
    .push-order-details2 .select-operator{
      width: 100%;
      min-height:32px;
      border:none;
      outline:none;
      font-size: 16px;
      color: #666;
      background: none;
      text-align: right;
      /*direction: rtl;*/
    }
    .push-order-details2 .popup-select-product .media-action{
      justify-content: flex-end;
      padding:8px 0 0;
      align-items: center;
  }
    .push-order-details2 .popup-select-product .media-action .iconfont{
      padding:0 4px;
      font-size: 24px;
      color: #888;

    }
    .push-order-details2 .popup-select-product .media-action .icon-bianji{
      font-size: 19px;
      color: #0080e5;
    }
    .push-order-details2 .me-popup-classify{
      width: 100%;
      min-height: 40%;
      max-height: 100%;
      padding:12px 16px;
      overflow: auto;
    }

    .push-order-details2 .popup-classify-add .button-block-6{
      display: inline-block;
      width: 50%;
      padding:0 10px;
    }
    .push-order-details2 .popup-classify-add .button-block-6 .mint-button{
      display: block;
      width: 100%;
    }
    .push-order-details2 .popup-classify-add .button-content{
      padding:16px 0;
      font-size: 0;
    }
    .push-order-details2 .me-popup-classify .button-content{
      padding:16px 80px;
      font-size: 0;
    }
    .push-order-details2 .me-popup-classify .button-content .mint-button{
      width: 100%;
    }
    .push-order-details2 .wrod-info-check{
      font-size: 15px;
    }
    .push-order-details2 .wrod-info-check .ic-circel{
      margin-right:12px;
    }
    .push-order-details2 .wrod-info-check .ic-circel:before{
      content: '';
      background: #e1e1e1;
      display: inline-block;
      width: 10px;
      height: 10px;
      margin:0 3px;
      border-radius: 50%;
    }
    .push-order-details2 .wrod-info-check .ic-true:before{
      background: #4bc8a6;
    }
    .push-order-details2 .wrod-info-check .ic-wrong:before{
      background: #f74b57;
    }
    .push-order-details2 .popup-check-car .button-content .mint-button{
      margin:0 10px;
      font-size: 15px;
    }
</style>
